<div class="right-panel">
    <!--cont-top Start-->
    <div class="cont-top">
        <div class="left-cr"></div>
        <div class="right-cr"></div>
    </div>
    <!--cont-top End-->
    <!---left-nav Sart-->
    <div class="right-nav">
        <?php
        echo $this->session->flash();
        ?>
        <h2><?php echo __('PAYEE_PROFILE_MAINTENANCE'); ?>
            <span  class="back-align">
                <?php echo $this->html->link('<< ' . __('BACK', true), array('controller' => 'payees', 'action' => 'index'), array('div' => false, 'alt' => '<< ' . __('BACK', true), 'title' => '<< ' . __('BACK', true), 'class' => 'back-nav', 'escape' => false)); ?>
            </span>
        </h2>
        <!--register Starts-->
        <div class="register">
            <div class="mandatory2">( <span class="astric">*</span> <?php echo __('COMPULSORY_FIELDS'); ?> )</div>

            <div class="form-padd">

                <!--introduction Start-->
                <div class=" introduction">        
                    <?php echo $this->Form->create("Payee");?>
                    <ul class="form-content">
                        <li>
                            <label><?php echo __('ENG_NAME'); ?> <span class="astric">*</span> :</label>
                            <?php 
                                echo $this->Form->input('id', array('id' => 'payee_id'));
                                echo $this->Form->input('eng_name', array('maxlength' => '35', 'class' => 'text-input small-wdh', 'label' => false)); 
                            ?>
                        </li>
                        <li>
                            <label><?php echo __('CHI_NAME'); ?> <span class="astric">*</span> :</label>
                            <?php echo $this->Form->input('chi_name', array('maxlength' => '35', 'class' => 'text-input small-wdh', 'label' => false)); ?>
                        </li>
                        <li>
                            <label><?php echo __('PHONE'); ?> <span class="astric">*</span> :</label>
                            <?php echo $this->Form->input('phone', array('maxlength' => '35', 'class' => 'text-input small-wdh', 'label' => false)); ?>
                        </li>
                        <li>
                            <label><?php echo __('EMAIL'); ?> <span class="astric">*</span> :</label>
                            <?php echo $this->Form->input('email', array('maxlength' => '35', 'class' => 'text-input small-wdh', 'label' => false)); ?>
                            <?php echo $this->Form->hidden('contact_file_id', array( 'id' => 'contact_file_id')); ?>
                            <?php echo $this->Form->hidden('ids_file_id', array( 'id' => 'ids_file_id')); ?>
                            <?php echo $this->Form->hidden('baseUrl', array('id' => 'baseUrl', 'value' => $this->Html->url( '/', true ))); ?>
                        </li>
                    </ul>
                    
                    <div style="margin-top: 20px;">
                        <div id="contactsFile" class="contactfilediv">
                            <?php echo $this->element('payees/contacts_edit');?>
                        </div>
                        <div id="idsFile" class="contactfilediv">
                            <?php echo $this->element('payees/ids_edit');?>
                        </div>
                        <div style="clear: left;"></div>
                    </div>
                    
                    <ul class="form-content" style="margin-top: 20px;">
                        <li>
                            <label><?php echo __('RECORDED_BY'); ?> <span class="astric">*</span> :</label>
                            <?php echo $this->Form->input('recorded_by', array('maxlength' => '35', 'class' => 'text-input small-wdh', 'label' => false)); ?>
                        </li>
                        <li>
                            <label><?php echo __('LAST_CREATED_BY'); ?> <span class="astric">*</span> :</label>
                            <?php echo $this->Form->input('last_created_by', array('maxlength' => '35', 'class' => 'text-input small-wdh', 'label' => false)); ?>
                        </li>
                    </ul>
                    <div class="actionbtns">
                        <?php echo $this->Form->submit(__('UPDATE'), array("class"=>"button", 'div' => false));?>
                        <div class="buttonEnding"></div>
                    </div>
                    
                    <?php echo $this->Form->end();?>
                    
                </div>
                <!--introduction End-->
                <div class="clear"></div>
            </div>
        </div>        
    </div>
</div>

<script type="text/javascript">
    function browseContactFile(){
        jQuery('#upload_files').trigger('click');
    }
    
    function browseIdFile(){
        jQuery('#upload_files_ids').trigger('click');
    }
    jQuery('document').ready(function(){
        var baseUrl = jQuery('#baseUrl').val();
        //------- Conatct Files--------------
        var input = document.getElementById("upload_files");
        var formdata = false;
        if (window.FormData) {
            formdata = new FormData();
        }
        var payeeId = parseInt(jQuery('#payee_id').val());
        
        input.addEventListener("change", function (evt) {
            var i = 0, len = this.files.length, img, reader, file;

            for ( ; i < len; i++ ) {
                file = this.files[i];

                if (!!file.type.match(/image.*/) || !!file.type.match(/pdf.*/)) {
                    if ( window.FileReader ) {
                        reader = new FileReader();
                        reader.onloadend = function (e) {
                            //showUploadedItem(e.target.result, file.fileName);
                        };
                        reader.readAsDataURL(file);
                    }

                    if (formdata) {
                        formdata.append("image", file);
                    }

                    if (formdata) {
                        jQuery.ajax({
                            url: baseUrl+"payees/upload_file_edit/"+payeeId+'/contact/contacts_edit',
                            type: "POST",
                            data: formdata,
                            processData: false,
                            contentType: false,
                            success: function (res) {
                                jQuery('div#contactsFile').html(res);
                                //jQuery('div#response div ul').append(res);
                                //var fileId = jQuery('<div>'+res+'</div>').find('span:first').attr("id");
                                //jQuery('#contact_file_id').val(jQuery('#contact_file_id').val() + fileId + ',');
                            }
                        });
                    }
                }else {
                    alert(file['name']+' is Not a vaild file! Please upload an Image or PDF');
                }
            }

        }, false);
        
        
        //------- Conatct Files--------------
        var inputId = document.getElementById("upload_files_ids");
        var formdataIds = false;
        if (window.FormData) {
            formdataIds = new FormData();
        }
        
        inputId.addEventListener("change", function (evt) {
            var i = 0, len = this.files.length, img, reader, file;

            for ( ; i < len; i++ ) {
                file = this.files[i];

                if (!!file.type.match(/image.*/) || !!file.type.match(/pdf.*/)) {
                    if ( window.FileReader ) {
                        reader = new FileReader();
                        reader.onloadend = function (e) {
                            //showUploadedItem(e.target.result, file.fileName);
                        };
                        reader.readAsDataURL(file);
                    }

                    if (formdataIds) {
                        formdataIds.append("image", file);
                    }

                    if (formdataIds) {
                        jQuery.ajax({
                            url: baseUrl+"payees/upload_file_edit/"+payeeId+'/id/ids_edit',
                            type: "POST",
                            data: formdataIds,
                            processData: false,
                            contentType: false,
                            success: function (res) {
                                jQuery('div#idsFile').html(res);
                                //alert(res);
                                //jQuery('div#idsresponse').show();
                                //jQuery('div#idsresponse div ul').append(res);
                                //var fileId = jQuery('<div>'+res+'</div>').find('span:first').attr("id");
                                //jQuery('#ids_file_id').val(jQuery('#ids_file_id').val() + fileId + ',');
                            }
                        });
                    }
                }else {
                    alert(file['name']+' is Not a vaild file! Please upload an Image or PDF');
                }
            }

        }, false);
    });
</script>
